<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <h3>Toggle Buttons</h3> <div class="root"> <div class="row-wrapper"> <div class="row"> <div class="col"> <div class="mt-ios"><input id="7.1.1" type="checkbox" /> <label for="7.1.1"></label></div> <div class="mt-ios"><input id="7.1.2" type="checkbox" checked /> <label for="7.1.2"></label></div> <span class="info-class">.mt-ios</span> </div> <div class="col"> <div class="mt-ios-red"><input id="7.2.1" type="checkbox" /> <label for="7.2.1"></label></div> <div class="mt-ios-red"><input id="7.2.2" type="checkbox" checked /> <label for="7.2.2"></label></div> <span class="info-class">.mt-ios-red</span> </div> <div class="col"> <div class="mt-ios-blue"><input id="7.3.1" type="checkbox" /> <label for="7.3.1"></label></div> <div class="mt-ios-blue"><input id="7.3.2" type="checkbox" checked /> <label for="7.3.2"></label></div> <span class="info-class">.mt-ios-blue</span> </div> <div class="col"> <div class="mt-ios"><input id="7.4.1" type="checkbox" disabled /> <label for="7.4.1"></label></div> <div class="mt-ios"><input id="7.4.2" type="checkbox" checked disabled /> <label for="7.4.2"></label></div> <span class="info-class">disabled</span> </div> <div class="col"> <div class="mt-ios" style="font-size: 9px;"><input id="7.5.1" type="checkbox" /> <label for="7.5.1"></label></div> <div class="mt-ios" style="font-size: 9px;"><input id="7.5.2" type="checkbox" checked /> <label for="7.5.2"></label></div> <span class="info-class"> .mt-ios<br /> font-size:9px </span> </div> </div> <div class="name">IOS</div> </div> <div class="row-wrapper"> <div class="row"> <div class="col"> <div class="mt-android"><input id="6.1.1" type="checkbox" /> <label for="6.1.1"></label></div> <div class="mt-android"><input id="6.1.2" type="checkbox" checked /> <label for="6.1.2"></label></div> <span class="info-class">.mt-android</span> </div> <div class="col"> <div class="mt-android-indigo"><input id="6.2.1" type="checkbox" /> <label for="6.2.1"></label></div> <div class="mt-android-indigo"><input id="6.2.2" type="checkbox" checked /> <label for="6.2.2"></label></div> <span class="info-class">.mt-android-indigo</span> </div> <div class="col"> <div class="mt-android-violet"><input id="6.3.1" type="checkbox" /> <label for="6.3.1"></label></div> <div class="mt-android-violet"><input id="6.3.2" type="checkbox" checked /> <label for="6.3.2"></label></div> <span class="info-class">.mt-android-violet</span> </div> <div class="col"> <div class="mt-android-pink"><input id="6.6.1" type="checkbox" /> <label for="6.6.1"></label></div> <div class="mt-android-pink"><input id="6.6.2" type="checkbox" checked /> <label for="6.6.2"></label></div> <span class="info-class">.mt-android-pink</span> </div> <div class="col"> <div class="mt-android-orange"><input id="6.7.1" type="checkbox" /> <label for="6.7.1"></label></div> <div class="mt-android-orange"><input id="6.7.2" type="checkbox" checked /> <label for="6.7.2"></label></div> <span class="info-class">.mt-android-orange</span> </div> <div class="col"> <div class="mt-android"><input id="6.4.1" type="checkbox" disabled /> <label for="6.4.1"></label></div> <div class="mt-android"><input id="6.4.2" type="checkbox" checked disabled /> <label for="6.4.2"></label></div> <span class="info-class">disabled</span> </div> <div class="col"> <div class="mt-android" style="font-size: 9px;"><input id="6.5.1" type="checkbox" /> <label for="6.5.1"></label></div> <div class="mt-android" style="font-size: 9px;"><input id="6.5.2" type="checkbox" checked /> <label for="6.5.2"></label></div> <span class="info-class"> .mt-android<br /> font-size:9px </span> </div> </div> <div class="name">Android</div> </div> <div class="row-wrapper"> <div class="row"> <div class="col"> <div class="mt-io"><input id="roxgzzrk.1.1" type="checkbox" /> <label for="roxgzzrk.1.1"></label></div> <div class="mt-io"><input id="roxgzzrk.1.2" type="checkbox" checked /> <label for="roxgzzrk.1.2"></label></div> <span class="info-class">.mt-io</span> </div> <div class="col"> <div class="mt-io-yellow"><input id="roxgzzrk.2.1" type="checkbox" /> <label for="roxgzzrk.2.1"></label></div> <div class="mt-io-yellow"><input id="roxgzzrk.2.2" type="checkbox" checked /> <label for="roxgzzrk.2.2"></label></div> <span class="info-class">.mt-io-yellow</span> </div> <div class="col"> <div class="mt-io-garden"><input id="roxgzzrk.3.1" type="checkbox" /> <label for="roxgzzrk.3.1"></label></div> <div class="mt-io-garden"><input id="roxgzzrk.3.2" type="checkbox" checked /> <label for="roxgzzrk.3.2"></label></div> <span class="info-class">.mt-io-garden</span> </div> <div class="col"> <div class="mt-io-navi"><input id="roxgzzrk.4.1" type="checkbox" /> <label for="roxgzzrk.4.1"></label></div> <div class="mt-io-navi"><input id="roxgzzrk.4.2" type="checkbox" checked /> <label for="roxgzzrk.4.2"></label></div> <span class="info-class">.mt-io-navi</span> </div> <div class="col"> <div class="mt-io-violet"><input id="roxgzzrk.5.1" type="checkbox" /> <label for="roxgzzrk.5.1"></label></div> <div class="mt-io-violet"><input id="roxgzzrk.5.2" type="checkbox" checked /> <label for="roxgzzrk.5.2"></label></div> <span class="info-class">.mt-io-violet</span> </div> <div class="col"> <div class="mt-io"><input id="roxgzzrk.6.1" type="checkbox" disabled /> <label for="roxgzzrk.6.1"></label></div> <div class="mt-io"><input id="roxgzzrk.6.2" type="checkbox" checked disabled /> <label for="roxgzzrk.6.2"></label></div> <span class="info-class">disabled</span> </div> <div class="col"> <div class="mt-io" style="font-size: 9px;"><input id="roxgzzrk.7.1" type="checkbox" /> <label for="roxgzzrk.7.1"></label></div> <div class="mt-io" style="font-size: 9px;"><input id="roxgzzrk.7.2" type="checkbox" checked /> <label for="roxgzzrk.7.2"></label></div> <span class="info-class"> .mt-io<br /> font-size:9px </span> </div> </div> <div class="name">io</div> </div> <div class="row-wrapper"> <div class="row"> <div class="col"> <div class="mt-normal"><input id="1.1.1" type="checkbox" /> <label for="1.1.1"></label></div> <div class="mt-normal"><input id="1.1.2" type="checkbox" checked /> <label for="1.1.2"></label></div> <span class="info-class">.mt-normal</span> </div> <div class="col"> <div class="mt-normal-garden"><input id="1.4.1" type="checkbox" /> <label for="1.4.1"></label></div> <div class="mt-normal-garden"><input id="1.4.2" type="checkbox" checked /> <label for="1.4.2"></label></div> <span class="info-class">.mt-normal-garden</span> </div> <div class="col"> <div class="mt-normal-navi"><input id="1.3.1" type="checkbox" /> <label for="1.3.1"></label></div> <div class="mt-normal-navi"><input id="1.3.2" type="checkbox" checked /> <label for="1.3.2"></label></div> <span class="info-class">.mt-normal-navi</span> </div> <div class="col"> <div class="mt-normal-violet"><input id="1.5.1" type="checkbox" /> <label for="1.5.1"></label></div> <div class="mt-normal-violet"><input id="1.5.2" type="checkbox" checked /> <label for="1.5.2"></label></div> <span class="info-class">.mt-normal-violet</span> </div> <div class="col"> <div class="mt-normal-juice"><input id="1.6.1" type="checkbox" /> <label for="1.6.1"></label></div> <div class="mt-normal-juice"><input id="1.6.2" type="checkbox" checked /> <label for="1.6.2"></label></div> <span class="info-class">.mt-normal-juice</span> </div> <div class="col"> <div class="mt-normal"><input id="1.2.1" type="checkbox" disabled /> <label for="1.2.1"></label></div> <div class="mt-normal"><input id="1.2.2" type="checkbox" disabled checked /> <label for="1.2.2"></label></div> <span class="info-class">disabled</span> </div> <div class="col"> <div class="mt-normal" style="font-size: 9px;"><input id="1.7.1" type="checkbox" /> <label for="1.7.1"></label></div> <div class="mt-normal" style="font-size: 9px;"><input id="1.7.2" type="checkbox" checked /> <label for="1.7.2"></label></div> <span class="info-class"> .mt-normal<br /> font-size:9px </span> </div> </div> <div class="name">Normal</div> </div> <div class="row-wrapper"> <div class="row"> <div class="col"> <div class="mt-transparent"><input id="2.1.1" type="checkbox" /> <label for="2.1.1"></label></div> <div class="mt-transparent"><input id="2.1.2" type="checkbox" checked /> <label for="2.1.2"></label></div> <span class="info-class">.mt-transparent</span> </div> <div class="col"> <div class="mt-transparent-navi"><input id="2.2.1" type="checkbox" /> <label for="2.2.1"></label></div> <div class="mt-transparent-navi"><input id="2.2.2" type="checkbox" checked /> <label for="2.2.2"></label></div> <span class="info-class">.mt-transparent-navi</span> </div> <div class="col"> <div class="mt-transparent-blood"><input id="2.3.1" type="checkbox" /> <label for="2.3.1"></label></div> <div class="mt-transparent-blood"><input id="2.3.2" type="checkbox" checked /> <label for="2.3.2"></label></div> <span class="info-class">.mt-transparent-blood</span> </div> <div class="col"> <div class="mt-transparent-violet"><input id="2.4.1" type="checkbox" /> <label for="2.4.1"></label></div> <div class="mt-transparent-violet"><input id="2.4.2" type="checkbox" checked /> <label for="2.4.2"></label></div> <span class="info-class">.mt-transparent-violet</span> </div> <div class="col"> <div class="mt-transparent-brown"><input id="2.5.1" type="checkbox" /> <label for="2.5.1"></label></div> <div class="mt-transparent-brown"><input id="2.5.2" type="checkbox" checked /> <label for="2.5.2"></label></div> <span class="info-class">.mt-transparent-brown</span> </div> <div class="col"> <div class="mt-transparent"><input id="2.6.1" type="checkbox" disabled /> <label for="2.6.1"></label></div> <div class="mt-transparent"><input id="2.6.2" type="checkbox" checked disabled /> <label for="2.6.2"></label></div> <span class="info-class">disabled</span> </div> <div class="col"> <div class="mt-transparent" style="font-size: 9px;"><input id="2.7.1" type="checkbox" /> <label for="2.7.1"></label></div> <div class="mt-transparent" style="font-size: 9px;"><input id="2.7.2" type="checkbox" checked /> <label for="2.7.2"></label></div> <span class="info-class"> .mt-transparent<br /> font-size:9px </span> </div> </div> <div class="name">transparent</div> </div> <div class="row-wrapper"> <div class="row"> <div class="col"> <div class="mt-check"><input id="3.1.1" type="checkbox" /> <label for="3.1.1"></label></div> <div class="mt-check"><input id="3.1.2" type="checkbox" checked /> <label for="3.1.2"></label></div> <span class="info-class">.mt-check</span> </div> <div class="col"> <div class="mt-check-garden"><input id="3.2.1" type="checkbox" /> <label for="3.2.1"></label></div> <div class="mt-check-garden"><input id="3.2.2" type="checkbox" checked /> <label for="3.2.2"></label></div> <span class="info-class">.mt-check-garden</span> </div> <div class="col"> <div class="mt-check-matte"><input id="3.4.1" type="checkbox" /> <label for="3.4.1"></label></div> <div class="mt-check-matte"><input id="3.4.2" type="checkbox" checked /> <label for="3.4.2"></label></div> <span class="info-class">.mt-check-matte</span> </div> <div class="col"> <div class="mt-check-fruit"><input id="3.6.1" type="checkbox" /> <label for="3.6.1"></label></div> <div class="mt-check-fruit"><input id="3.6.2" type="checkbox" checked /> <label for="3.6.2"></label></div> <span class="info-class">.mt-check-fruit</span> </div> <div class="col"> <div class="mt-check-pink"><input id="3.3.1" type="checkbox" /> <label for="3.3.1"></label></div> <div class="mt-check-pink"><input id="3.3.2" type="checkbox" checked /> <label for="3.3.2"></label></div> <span class="info-class">.mt-check-pink</span> </div> <div class="col"> <div class="mt-check"><input id="3.5.1" type="checkbox" disabled /> <label for="3.5.1"></label></div> <div class="mt-check"><input id="3.5.2" type="checkbox" checked disabled /> <label for="3.5.2"></label></div> <span class="info-class">disabled</span> </div> <div class="col"> <div class="mt-check" style="font-size: 9px;"><input id="3.7.1" type="checkbox" /> <label for="3.7.1"></label></div> <div class="mt-check" style="font-size: 9px;"><input id="3.7.2" type="checkbox" checked /> <label for="3.7.2"></label></div> <span class="info-class"> .mt-check<br /> font-size:9px </span> </div> </div> <div class="name">check</div> </div> <div class="row-wrapper"> <div class="row"> <div class="col"> <div class="mt-yesno"><input id="88LXptHV.1.1" type="checkbox" /> <label for="88LXptHV.1.1"></label></div> <div class="mt-yesno"><input id="88LXptHV.1.2" type="checkbox" checked /> <label for="88LXptHV.1.2"></label></div> <span class="info-class">.mt-yesno</span> </div> <div class="col"> <div class="mt-yesno-garden"><input id="88LXptHV.2.1" type="checkbox" /> <label for="88LXptHV.2.1"></label></div> <div class="mt-yesno-garden"><input id="88LXptHV.2.2" type="checkbox" checked /> <label for="88LXptHV.2.2"></label></div> <span class="info-class">.mt-yesno-garden</span> </div> <div class="col"> <div class="mt-yesno-matte"><input id="88LXptHV.4.1" type="checkbox" /> <label for="88LXptHV.4.1"></label></div> <div class="mt-yesno-matte"><input id="88LXptHV.4.2" type="checkbox" checked /> <label for="88LXptHV.4.2"></label></div> <span class="info-class">.mt-yesno-matte</span> </div> <div class="col"> <div class="mt-yesno-fruit"><input id="88LXptHV.6.1" type="checkbox" /> <label for="88LXptHV.6.1"></label></div> <div class="mt-yesno-fruit"><input id="88LXptHV.6.2" type="checkbox" checked /> <label for="88LXptHV.6.2"></label></div> <span class="info-class">.mt-yesno-fruit</span> </div> <div class="col"> <div class="mt-yesno-blush"><input id="88LXptHV.3.1" type="checkbox" /> <label for="88LXptHV.3.1"></label></div> <div class="mt-yesno-blush"><input id="88LXptHV.3.2" type="checkbox" checked /> <label for="88LXptHV.3.2"></label></div> <span class="info-class">.mt-yesno-blush</span> </div> <div class="col"> <div class="mt-yesno"><input id="88LXptHV.5.1" type="checkbox" disabled /> <label for="88LXptHV.5.1"></label></div> <div class="mt-yesno"><input id="88LXptHV.5.2" type="checkbox" checked disabled /> <label for="88LXptHV.5.2"></label></div> <span class="info-class">disabled</span> </div> <div class="col"> <div class="mt-yesno" style="font-size: 9px;"><input id="88LXptHV.7.1" type="checkbox" /> <label for="88LXptHV.7.1"></label></div> <div class="mt-yesno" style="font-size: 9px;"><input id="88LXptHV.7.2" type="checkbox" checked /> <label for="88LXptHV.7.2"></label></div> <span class="info-class"> .mt-yesno<br /> font-size:9px </span> </div> </div> <div class="name">yes no</div> </div> <div class="row-wrapper"> <div class="row"> <div class="col"> <div class="mt-square"><input id="4.1.1" type="checkbox" /> <label for="4.1.1"></label></div> <div class="mt-square"><input id="4.1.2" type="checkbox" checked /> <label for="4.1.2"></label></div> <span class="info-class">.mt-square</span> </div> <div class="col"> <div class="mt-square-garden"><input id="4.2.1" type="checkbox" /> <label for="4.2.1"></label></div> <div class="mt-square-garden"><input id="4.2.2" type="checkbox" checked /> <label for="4.2.2"></label></div> <span class="info-class">.mt-square-garden</span> </div> <div class="col"> <div class="mt-square-tomato"><input id="4.3.1" type="checkbox" /> <label for="4.3.1"></label></div> <div class="mt-square-tomato"><input id="4.3.2" type="checkbox" checked /> <label for="4.3.2"></label></div> <span class="info-class">.mt-square-tomato</span> </div> <div class="col"> <div class="mt-square-matcha"><input id="4.4.1" type="checkbox" /> <label for="4.4.1"></label></div> <div class="mt-square-matcha"><input id="4.4.2" type="checkbox" checked /> <label for="4.4.2"></label></div> <span class="info-class">.mt-square-matcha</span> </div> <div class="col"> <div class="mt-square-pink"><input id="4.5.1" type="checkbox" /> <label for="4.5.1"></label></div> <div class="mt-square-pink"><input id="4.5.2" type="checkbox" checked /> <label for="4.5.2"></label></div> <span class="info-class">.mt-square-pink</span> </div> <div class="col"> <div class="mt-square"><input id="4.6.1" type="checkbox" disabled /> <label for="4.6.1"></label></div> <div class="mt-square"><input id="4.6.2" type="checkbox" checked disabled /> <label for="4.6.2"></label></div> <span class="info-class">disabled</span> </div> <div class="col"> <div class="mt-square" style="font-size: 9px;"><input id="4.7.1" type="checkbox" /> <label for="4.7.1"></label></div> <div class="mt-square" style="font-size: 9px;"><input id="4.7.2" type="checkbox" checked /> <label for="4.7.2"></label></div> <span class="info-class"> .mt-square<br /> font-size:9px </span> </div> </div> <div class="name">square</div> </div> <div class="row-wrapper"> <div class="row"> <div class="col"> <div class="mt-square3d"><input id="5.1.1" type="checkbox" /> <label for="5.1.1"></label></div> <div class="mt-square3d"><input id="5.1.2" type="checkbox" checked /> <label for="5.1.2"></label></div> <span class="info-class">.mt-square3d</span> </div> <div class="col"> <div class="mt-square3d-garden"><input id="5.2.1" type="checkbox" /> <label for="5.2.1"></label></div> <div class="mt-square3d-garden"><input id="5.2.2" type="checkbox" checked /> <label for="5.2.2"></label></div> <span class="info-class">.mt-square3d-garden</span> </div> <div class="col"> <div class="mt-square3d-tomato"><input id="5.3.1" type="checkbox" /> <label for="5.3.1"></label></div> <div class="mt-square3d-tomato"><input id="5.3.2" type="checkbox" checked /> <label for="5.3.2"></label></div> <span class="info-class">.mt-square3d-tomato</span> </div> <div class="col"> <div class="mt-square3d-matcha"><input id="5.4.1" type="checkbox" /> <label for="5.4.1"></label></div> <div class="mt-square3d-matcha"><input id="5.4.2" type="checkbox" checked /> <label for="5.4.2"></label></div> <span class="info-class">.mt-square3d-matcha</span> </div> <div class="col"> <div class="mt-square3d-blush"><input id="5.5.1" type="checkbox" /> <label for="5.5.1"></label></div> <div class="mt-square3d-blush"><input id="5.5.2" type="checkbox" checked /> <label for="5.5.2"></label></div> <span class="info-class">.mt-square3d-blush</span> </div> <div class="col"> <div class="mt-square3d"><input id="5.6.1" type="checkbox" disabled /> <label for="5.6.1"></label></div> <div class="mt-square3d"><input id="5.6.2" type="checkbox" checked disabled /> <label for="5.6.2"></label></div> <span class="info-class">disabled</span> </div> <div class="col"> <div class="mt-square3d" style="font-size: 9px;"><input id="5.7.1" type="checkbox" /> <label for="5.7.1"></label></div> <div class="mt-square3d" style="font-size: 9px;"><input id="5.7.2" type="checkbox" checked /> <label for="5.7.2"></label></div> <span class="info-class"> .mt-square3d<br /> font-size:9px </span> </div> </div> <div class="name">square3d</div> </div> <div class="row-wrapper"> <div class="row"> <div class="col"> <div class="mt-ios"><input id="7.1.1" type="checkbox" /> <label for="7.1.1"></label></div> <div class="mt-ios"><input id="7.1.2" type="checkbox" checked /> <label for="7.1.2"></label></div> <span class="info-class">.mt-ios</span> </div> <div class="col"> <div class="mt-star-garden"><input id="ujyldvzw.2.1" type="checkbox" /> <label for="ujyldvzw.2.1"></label></div> <div class="mt-star-garden"><input id="ujyldvzw.2.2" type="checkbox" checked /> <label for="ujyldvzw.2.2"></label></div> <span class="info-class">.mt-star-garden</span> </div> <div class="col"> <div class="mt-star-tomato"><input id="ujyldvzw.3.1" type="checkbox" /> <label for="ujyldvzw.3.1"></label></div> <div class="mt-star-tomato"><input id="ujyldvzw.3.2" type="checkbox" checked /> <label for="ujyldvzw.3.2"></label></div> <span class="info-class">.mt-star-tomato</span> </div> <div class="col"> <div class="mt-star-pink"><input id="ujyldvzw.4.1" type="checkbox" /> <label for="ujyldvzw.4.1"></label></div> <div class="mt-star-pink"><input id="ujyldvzw.4.2" type="checkbox" checked /> <label for="ujyldvzw.4.2"></label></div> <span class="info-class">.mt-star-pink</span> </div> <div class="col"> <div class="mt-star-golden"><input id="ujyldvzw.5.1" type="checkbox" /> <label for="ujyldvzw.5.1"></label></div> <div class="mt-star-golden"><input id="ujyldvzw.5.2" type="checkbox" checked /> <label for="ujyldvzw.5.2"></label></div> <span class="info-class">.mt-star-golden</span> </div> <div class="col"> <div class="mt-star"><input id="ujyldvzw.6.1" type="checkbox" disabled /> <label for="ujyldvzw.6.1"></label></div> <div class="mt-star"><input id="ujyldvzw.6.2" type="checkbox" checked disabled /> <label for="ujyldvzw.6.2"></label></div> <span class="info-class">disabled</span> </div> <div class="col"> <div class="mt-star" style="font-size: 9px;"><input id="ujyldvzw.7.1" type="checkbox" /> <label for="ujyldvzw.7.1"></label></div> <div class="mt-star" style="font-size: 9px;"><input id="ujyldvzw.7.2" type="checkbox" checked /> <label for="ujyldvzw.7.2"></label></div> <span class="info-class"> .mt-star<br /> font-size:9px </span> </div> </div> <div class="name">star</div> </div> <div class="row-wrapper"> <div class="row"> <div class="col"> <div class="mt-heart"><input id="hbzhcpxz.1.1" type="checkbox" /> <label for="hbzhcpxz.1.1"></label></div> <div class="mt-heart"><input id="hbzhcpxz.1.2" type="checkbox" checked /> <label for="hbzhcpxz.1.2"></label></div> <span class="info-class">.mt-heart</span> </div> <div class="col"> <div class="mt-heart-blush"><input id="hbzhcpxz.2.1" type="checkbox" /> <label for="hbzhcpxz.2.1"></label></div> <div class="mt-heart-blush"><input id="hbzhcpxz.2.2" type="checkbox" checked /> <label for="hbzhcpxz.2.2"></label></div> <span class="info-class">.mt-heart-blush</span> </div> <div class="col"> <div class="mt-heart-indigo"><input id="hbzhcpxz.3.1" type="checkbox" /> <label for="hbzhcpxz.3.1"></label></div> <div class="mt-heart-indigo"><input id="hbzhcpxz.3.2" type="checkbox" checked /> <label for="hbzhcpxz.3.2"></label></div> <span class="info-class">.mt-heart-indigo</span> </div> <div class="col"> <div class="mt-heart-pink"><input id="hbzhcpxz.4.1" type="checkbox" /> <label for="hbzhcpxz.4.1"></label></div> <div class="mt-heart-pink"><input id="hbzhcpxz.4.2" type="checkbox" checked /> <label for="hbzhcpxz.4.2"></label></div> <span class="info-class">.mt-heart-pink</span> </div> <div class="col"> <div class="mt-heart-golden"><input id="hbzhcpxz.5.1" type="checkbox" /> <label for="hbzhcpxz.5.1"></label></div> <div class="mt-heart-golden"><input id="hbzhcpxz.5.2" type="checkbox" checked /> <label for="hbzhcpxz.5.2"></label></div> <span class="info-class">.mt-heart-golden</span> </div> <div class="col"> <div class="mt-heart"><input id="hbzhcpxz.6.1" type="checkbox" disabled /> <label for="hbzhcpxz.6.1"></label></div> <div class="mt-heart"><input id="hbzhcpxz.6.2" type="checkbox" checked disabled /> <label for="hbzhcpxz.6.2"></label></div> <span class="info-class">disabled</span> </div> <div class="col"> <div class="mt-heart" style="font-size: 9px;"><input id="hbzhcpxz.7.1" type="checkbox" /> <label for="hbzhcpxz.7.1"></label></div> <div class="mt-heart" style="font-size: 9px;"><input id="hbzhcpxz.7.2" type="checkbox" checked /> <label for="hbzhcpxz.7.2"></label></div> <span class="info-class"> .mt-heart<br /> font-size:9px </span> </div> </div> <div class="name">heart</div> </div> <div class="row-wrapper"> <div class="row"> <div class="col"> <div class="mt-icon-music"><input id="yumlxfzq.1.1" type="checkbox" /> <label for="yumlxfzq.1.1"></label></div> <div class="mt-icon-music"><input id="yumlxfzq.1.2" type="checkbox" checked /> <label for="yumlxfzq.1.2"></label></div> <span class="info-class">.mt-icon-music</span> </div> <div class="col"> <div class="mt-icon-ring"><input id="yumlxfzq.2.1" type="checkbox" /> <label for="yumlxfzq.2.1"></label></div> <div class="mt-icon-ring"><input id="yumlxfzq.2.2" type="checkbox" checked /> <label for="yumlxfzq.2.2"></label></div> <span class="info-class">.mt-icon-ring</span> </div> <div class="col"> <div class="mt-icon-mic"><input id="yumlxfzq.3.1" type="checkbox" /> <label for="yumlxfzq.3.1"></label></div> <div class="mt-icon-mic"><input id="yumlxfzq.3.2" type="checkbox" checked /> <label for="yumlxfzq.3.2"></label></div> <span class="info-class">.mt-icon-mic</span> </div> <div class="col"> <div class="mt-icon-cam"><input id="yumlxfzq.4.1" type="checkbox" /> <label for="yumlxfzq.4.1"></label></div> <div class="mt-icon-cam"><input id="yumlxfzq.4.2" type="checkbox" checked /> <label for="yumlxfzq.4.2"></label></div> <span class="info-class">.mt-icon-cam</span> </div> <div class="col"> <div class="mt-icon-pin"><input id="yumlxfzq.5.1" type="checkbox" /> <label for="yumlxfzq.5.1"></label></div> <div class="mt-icon-pin"><input id="yumlxfzq.5.2" type="checkbox" checked /> <label for="yumlxfzq.5.2"></label></div> <span class="info-class">.mt-icon-pin</span> </div> <div class="col"> <div class="mt-icon-music"><input id="yumlxfzq.6.1" type="checkbox" disabled /> <label for="yumlxfzq.6.1"></label></div> <div class="mt-icon-music"><input id="yumlxfzq.6.2" type="checkbox" checked disabled /> <label for="yumlxfzq.6.2"></label></div> <span class="info-class">disabled</span> </div> <div class="col"> <div class="mt-icon-music" style="font-size: 9px;"><input id="yumlxfzq.7.1" type="checkbox" /> <label for="yumlxfzq.7.1"></label></div> <div class="mt-icon-music" style="font-size: 9px;"><input id="yumlxfzq.7.2" type="checkbox" checked /> <label for="yumlxfzq.7.2"></label></div> <span class="info-class"> .mt-icon-music<br /> font-size:9px </span> </div> </div> <div class="name">icon</div> </div> </div>

@charset "UTF-8";.mt-android,.mt-android-indigo,.mt-android-orange,.mt-android-pink,.mt-android-violet{display:inline-block;box-sizing:border-box} h3{text-align:center;margin-top:1.5em;color:#76B556;text-transform:uppercase;letter-spacing:1.5px;text-decoration:underline;} .mt-android-indigo label,.mt-android-orange label,.mt-android-pink label,.mt-android-violet label,.mt-android label{display:inline-block;position:relative;box-sizing:border-box;cursor:pointer;width:4em;height:1.75em;border-radius:.875em;background-image:linear-gradient(90deg,#848484 0,#848484 50%,#7cbcbf 0,#7cbcbf);background-size:8em 1.7em;transition:all .3s ease} .mt-android-indigo label:before,.mt-android-orange label:before,.mt-android-pink label:before,.mt-android-violet label:before,.mt-android label:before{content:"";display:block;position:absolute;width:2.25em;height:2.25em;top:-.25em;left:0;border-radius:2em;background:#fff;transition:.3s ease;box-shadow:0 .125em .375em rgba(0,0,0,.5)} .mt-android-indigo input,.mt-android-orange input,.mt-android-pink input,.mt-android-violet input,.mt-android input{position:absolute;box-sizing:border-box;height:0;width:0;font-size:inherit;margin:0;border:none;z-index:1;cursor:pointer;-moz-appearance:none;-webkit-appearance:none} .mt-android-indigo input:focus,.mt-android-orange input:focus,.mt-android-pink input:focus,.mt-android-violet input:focus,.mt-android input:focus{outline:none} .mt-android-indigo input:checked+label,.mt-android-orange input:checked+label,.mt-android-pink input:checked+label,.mt-android-violet input:checked+label,.mt-android input:checked+label{background-position:-100%} .mt-android-indigo input:checked+label:before,.mt-android-orange input:checked+label:before,.mt-android-pink input:checked+label:before,.mt-android-violet input:checked+label:before,.mt-android input:checked+label:before{transform:translateX(1.75em)} .mt-android-indigo input:disabled+label,.mt-android-orange input:disabled+label,.mt-android-pink input:disabled+label,.mt-android-violet input:disabled+label,.mt-android input:disabled+label{background:#ccc!important;cursor:not-allowed!important} .mt-android-indigo input:disabled+label:before,.mt-android-orange input:disabled+label:before,.mt-android-pink input:disabled+label:before,.mt-android-violet input:disabled+label:before,.mt-android input:disabled+label:before{background:#ccc!important;box-shadow:0 .125em .375em rgba(0,0,0,.5)!important} .mt-android-indigo label{background-image:linear-gradient(90deg,#848484 0,#848484 50%,#9fa8da 0,#9fa8da)} .mt-android-violet label{background-image:linear-gradient(90deg,#848484 0,#848484 50%,#ce93d8 0,#ce93d8)} .mt-android-pink label{background-image:linear-gradient(90deg,#848484 0,#848484 50%,#f48fb1 0,#f48fb1)} .mt-android-orange label{background-image:linear-gradient(90deg,#848484 0,#848484 50%,#ffcc80 0,#ffcc80)} .mt-check,.mt-check-fruit,.mt-check-garden,.mt-check-matte,.mt-check-pink{display:inline-block;box-sizing:border-box} .mt-check-fruit label,.mt-check-garden label,.mt-check-matte label,.mt-check-pink label,.mt-check label{display:inline-block;position:relative;box-sizing:border-box;cursor:pointer;width:7em;height:3em;border-radius:1.5em;background:#2e394d;border:none;transition:all .3s ease} .mt-check-fruit label:before,.mt-check-garden label:before,.mt-check-matte label:before,.mt-check-pink label:before,.mt-check label:before{content:"";display:block;position:absolute;width:2.4em;height:2.4em;top:.3em;left:.3em;border-radius:2.5em;background:#f0134d;transition:.3s ease} .mt-check-fruit input,.mt-check-garden input,.mt-check-matte input,.mt-check-pink input,.mt-check input{position:absolute;box-sizing:border-box;height:0;width:0;font-size:inherit;margin:0;border:none;z-index:1;cursor:pointer;-moz-appearance:none;-webkit-appearance:none} .mt-check-fruit input:focus,.mt-check-garden input:focus,.mt-check-matte input:focus,.mt-check-pink input:focus,.mt-check input:focus{outline:none} .mt-check-fruit input:after,.mt-check-fruit input:before,.mt-check-garden input:after,.mt-check-garden input:before,.mt-check-matte input:after,.mt-check-matte input:before,.mt-check-pink input:after,.mt-check-pink input:before,.mt-check input:after,.mt-check input:before{content:"";display:block;position:absolute;height:.25em;border-radius:.125em;background:#fff;transition:.3s ease} .mt-check-fruit input:before,.mt-check-garden input:before,.mt-check-matte input:before,.mt-check-pink input:before,.mt-check input:before{width:1.6875em;transform:rotate(-45deg) translate(-.525em,1.425em)} .mt-check-fruit input:after,.mt-check-garden input:after,.mt-check-matte input:after,.mt-check-pink input:after,.mt-check input:after{width:1.6875em;transform:rotate(45deg) translate(1.425em,.525em)} .mt-check-fruit input:checked:before,.mt-check-garden input:checked:before,.mt-check-matte input:checked:before,.mt-check-pink input:checked:before,.mt-check input:checked:before{width:1.5625em;transform:rotate(-45deg) translate(2.5375em,4.55em)} .mt-check-fruit input:checked:after,.mt-check-garden input:checked:after,.mt-check-matte input:checked:after,.mt-check-pink input:checked:after,.mt-check input:checked:after{width:.73em;transform:rotate(45deg) translate(4.55em,-2.1625em)} .mt-check-fruit input:checked+label:before,.mt-check-garden input:checked+label:before,.mt-check-matte input:checked+label:before,.mt-check-pink input:checked+label:before,.mt-check input:checked+label:before{background:#40bfc1;transform:translateX(4em)} .mt-check-fruit input:disabled:after,.mt-check-fruit input:disabled:before,.mt-check-garden input:disabled:after,.mt-check-garden input:disabled:before,.mt-check-matte input:disabled:after,.mt-check-matte input:disabled:before,.mt-check-pink input:disabled:after,.mt-check-pink input:disabled:before,.mt-check input:disabled:after,.mt-check input:disabled:before{cursor:not-allowed!important} .mt-check-fruit input:disabled+label,.mt-check-garden input:disabled+label,.mt-check-matte input:disabled+label,.mt-check-pink input:disabled+label,.mt-check input:disabled+label{background:#ccc!important;cursor:not-allowed!important} .mt-check-fruit input:disabled+label:before,.mt-check-garden input:disabled+label:before,.mt-check-matte input:disabled+label:before,.mt-check-pink input:disabled+label:before,.mt-check input:disabled+label:before{background:#ddd!important} .mt-check-garden label:before{background:#ff2e63} .mt-check-garden input:checked+label:before{background:#21bf73} .mt-check-pink label:before{background:#ffe3ed} .mt-check-pink input:after,.mt-check-pink input:before{background:#2e394d} .mt-check-pink input:checked+label:before{background:#beebe9} .mt-check-matte label:before{background:#c9485b} .mt-check-matte input:checked+label:before{background:#75b79e} .mt-check-fruit label:before{background:#ff8364} .mt-check-fruit input:checked+label:before{background:#5f6caf} .mt-emoji,.mt-emoji-gender,.mt-emoji-like,.mt-emoji-mood,.mt-emoji-mute,.mt-emoji-pet{display:inline-block;box-sizing:border-box} .mt-emoji-gender label,.mt-emoji-like label,.mt-emoji-mood label,.mt-emoji-mute label,.mt-emoji-pet label,.mt-emoji label{display:inline-block;position:relative;box-sizing:border-box;cursor:pointer;width:7em;height:.8em;border-radius:1em;background:#fff;border:.2em solid #888;transition:all .3s ease} .mt-emoji-gender label:before,.mt-emoji-like label:before,.mt-emoji-mood label:before,.mt-emoji-mute label:before,.mt-emoji-pet label:before,.mt-emoji label:before{content:"";display:block;position:absolute;font-size:3em;transition:.3s ease;left:0;top:-.6em} .mt-emoji-gender input,.mt-emoji-like input,.mt-emoji-mood input,.mt-emoji-mute input,.mt-emoji-pet input,.mt-emoji input{position:absolute;box-sizing:border-box;height:0;width:0;font-size:inherit;margin:0;border:none;z-index:1;cursor:pointer;-moz-appearance:none;-webkit-appearance:none} .mt-emoji-gender input:focus,.mt-emoji-like input:focus,.mt-emoji-mood input:focus,.mt-emoji-mute input:focus,.mt-emoji-pet input:focus,.mt-emoji input:focus{outline:none} .mt-emoji-gender input:checked+label:before,.mt-emoji-like input:checked+label:before,.mt-emoji-mood input:checked+label:before,.mt-emoji-mute input:checked+label:before,.mt-emoji-pet input:checked+label:before,.mt-emoji input:checked+label:before{transform:translateX(.8em)} .mt-emoji-gender input:disabled+label,.mt-emoji-like input:disabled+label,.mt-emoji-mood input:disabled+label,.mt-emoji-mute input:disabled+label,.mt-emoji-pet input:disabled+label,.mt-emoji input:disabled+label{cursor:not-allowed!important} .mt-star,.mt-star-garden,.mt-star-golden,.mt-star-pink,.mt-star-tomato{display:inline-block;box-sizing:border-box} .mt-star-garden label,.mt-star-golden label,.mt-star-pink label,.mt-star-tomato label,.mt-star label{display:inline-block;position:relative;box-sizing:border-box;cursor:pointer;width:5em;height:5em;transition:all .3s ease;overflow:hidden;clip-path:polygon(88.42% 39.625%,62.765% 36.275%,51.645% 12.85%,51.58018% 12.7258%,48.355% 12.85%,37.235% 36.275%,11.58% 39.625%,10.40617% 40.27148%,10.565% 42.7%,29.365% 60.54%,24.62% 86.05%,25.83849% 88.08153%,27.285% 87.945%,50% 75.545%,72.715% 87.94%,75.40571% 86.24281%,75.38% 86.045%,70.635% 60.53%,89.435% 42.69%,88.42% 39.625%,67.405% 58.615%,66.89479% 59.48382%,66.88% 60.235%);-webkit-clip-path:polygon(88.42% 39.625%,62.765% 36.275%,51.645% 12.85%,51.58018% 12.7258%,48.355% 12.85%,37.235% 36.275%,11.58% 39.625%,10.40617% 40.27148%,10.565% 42.7%,29.365% 60.54%,24.62% 86.05%,25.83849% 88.08153%,27.285% 87.945%,50% 75.545%,72.715% 87.94%,75.40571% 86.24281%,75.38% 86.045%,70.635% 60.53%,89.435% 42.69%,88.42% 39.625%,67.405% 58.615%,66.89479% 59.48382%,66.88% 60.235%)} .mt-star-garden label:before,.mt-star-golden label:before,.mt-star-pink label:before,.mt-star-tomato label:before,.mt-star label:before{content:"";display:block;position:absolute;width:5em;height:10em;background:linear-gradient(#cac9d1,#cac9d1 42%,#91e0f8 55%,#1b68cb);transition:.2s ease} .mt-star-garden input,.mt-star-golden input,.mt-star-pink input,.mt-star-tomato input,.mt-star input{position:absolute;box-sizing:border-box;height:0;width:0;font-size:inherit;margin:0;border:none;z-index:1;cursor:pointer;-moz-appearance:none;-webkit-appearance:none} .mt-star-garden input:focus,.mt-star-golden input:focus,.mt-star-pink input:focus,.mt-star-tomato input:focus,.mt-star input:focus{outline:none} .mt-star-garden input:after,.mt-star-garden input:before,.mt-star-golden input:after,.mt-star-golden input:before,.mt-star-pink input:after,.mt-star-pink input:before,.mt-star-tomato input:after,.mt-star-tomato input:before,.mt-star input:after,.mt-star input:before{content:"";display:block;position:absolute} .mt-star-garden input:checked+label:before,.mt-star-golden input:checked+label:before,.mt-star-pink input:checked+label:before,.mt-star-tomato input:checked+label:before,.mt-star input:checked+label:before{transform:translateY(-50%)} .mt-star-garden input:disabled+label,.mt-star-golden input:disabled+label,.mt-star-pink input:disabled+label,.mt-star-tomato input:disabled+label,.mt-star input:disabled+label{cursor:not-allowed!important} .mt-star-garden label:before{background:linear-gradient(#cac9d1,#cac9d1 42%,#7fee7f 55%,#21bf73)} .mt-star-tomato label:before{background:linear-gradient(#cac9d1,#cac9d1 42%,#f1a27d 55%,tomato)} .mt-star-pink label:before{background:linear-gradient(#cac9d1,#cac9d1 42%,#ffc1d7 55%,#ff77a6)} .mt-star-golden label:before{background:linear-gradient(#cac9d1,#cac9d1 42%,#ffed88 55%,#f3cf01)} .mt-heart,.mt-heart-blush,.mt-heart-golden,.mt-heart-indigo,.mt-heart-pink{display:inline-block;box-sizing:border-box} .mt-heart-blush label,.mt-heart-golden label,.mt-heart-indigo label,.mt-heart-pink label,.mt-heart label{display:inline-block;position:relative;box-sizing:border-box;cursor:pointer;width:5em;height:5em;transition:all .3s ease;overflow:hidden;clip-path:polygon(48.595% 85.365%,15.785% 52.815%,15.58945% 52.6185%,12.68962% 48.99466%,12.305% 48.375%,10.57963% 44.86051%,9.35896% 40.38282%,9.08571% 35.74977%,9.76901% 31.15918%,11.37828% 26.80595%,13.84412% 22.87395%,15.775% 20.7%,17.05533% 19.52258%,20.87248% 16.88208%,25.14556% 15.07038%,29.69731% 14.16234%,31.94% 14.055%,34.33933% 14.174%,38.88594% 15.10612%,43.14179% 16.95734%,46.93771% 19.62896%,50% 22.815%,50.13928% 22.64012%,53.40377% 19.34025%,57.24963% 16.74118%,61.54157% 14.97537%,66.10584% 14.13355%,68.06% 14.055%,70.74723% 14.20914%,75.28062% 15.20472%,79.51742% 17.09965%,83.2818% 19.81486%,84.225% 20.7%,86.42617% 23.22899%,88.81355% 27.2091%,90.33651% 31.59327%,90.92925% 36.19641%,90.56441% 40.82313%,89.25522% 45.27574%,87.69% 48.385%,87.0678% 49.36971%,84.215% 52.82%,51.405% 85.37%,51.05969% 85.64527%,48.595% 85.365%,31.94% 18.05%);-webkit-clip-path:polygon(48.595% 85.365%,15.785% 52.815%,15.58945% 52.6185%,12.68962% 48.99466%,12.305% 48.375%,10.57963% 44.86051%,9.35896% 40.38282%,9.08571% 35.74977%,9.76901% 31.15918%,11.37828% 26.80595%,13.84412% 22.87395%,15.775% 20.7%,17.05533% 19.52258%,20.87248% 16.88208%,25.14556% 15.07038%,29.69731% 14.16234%,31.94% 14.055%,34.33933% 14.174%,38.88594% 15.10612%,43.14179% 16.95734%,46.93771% 19.62896%,50% 22.815%,50.13928% 22.64012%,53.40377% 19.34025%,57.24963% 16.74118%,61.54157% 14.97537%,66.10584% 14.13355%,68.06% 14.055%,70.74723% 14.20914%,75.28062% 15.20472%,79.51742% 17.09965%,83.2818% 19.81486%,84.225% 20.7%,86.42617% 23.22899%,88.81355% 27.2091%,90.33651% 31.59327%,90.92925% 36.19641%,90.56441% 40.82313%,89.25522% 45.27574%,87.69% 48.385%,87.0678% 49.36971%,84.215% 52.82%,51.405% 85.37%,51.05969% 85.64527%,48.595% 85.365%,31.94% 18.05%)} .mt-heart-blush label:before,.mt-heart-golden label:before,.mt-heart-indigo label:before,.mt-heart-pink label:before,.mt-heart label:before{content:"";display:block;position:absolute;width:5em;height:10em;background:linear-gradient(200deg,#cac9d1,#cac9d1 42%,#ff7ea1 55%,#f00846);transition:.2s ease} .mt-heart-blush input,.mt-heart-golden input,.mt-heart-indigo input,.mt-heart-pink input,.mt-heart input{position:absolute;box-sizing:border-box;height:0;width:0;font-size:inherit;margin:0;border:none;z-index:1;cursor:pointer;-moz-appearance:none;-webkit-appearance:none} .mt-heart-blush input:focus,.mt-heart-golden input:focus,.mt-heart-indigo input:focus,.mt-heart-pink input:focus,.mt-heart input:focus{outline:none} .mt-heart-blush input:after,.mt-heart-blush input:before,.mt-heart-golden input:after,.mt-heart-golden input:before,.mt-heart-indigo input:after,.mt-heart-indigo input:before,.mt-heart-pink input:after,.mt-heart-pink input:before,.mt-heart input:after,.mt-heart input:before{content:"";display:block;position:absolute} .mt-heart-blush input:checked+label:before,.mt-heart-golden input:checked+label:before,.mt-heart-indigo input:checked+label:before,.mt-heart-pink input:checked+label:before,.mt-heart input:checked+label:before{transform:translateY(-50%)} .mt-heart-blush input:disabled+label,.mt-heart-golden input:disabled+label,.mt-heart-indigo input:disabled+label,.mt-heart-pink input:disabled+label,.mt-heart input:disabled+label{cursor:not-allowed!important} .mt-heart-blush label:before{background:linear-gradient(200deg,#cac9d1,#cac9d1 42%,#ffaab7 55%,#ff435f)} .mt-heart-indigo label:before{background:linear-gradient(200deg,#cac9d1,#cac9d1 42%,#a4a9ff 55%,#4b54ff)} .mt-heart-pink label:before{background:linear-gradient(200deg,#cac9d1,#cac9d1 42%,#ffc1d7 55%,#ff77a6)} .mt-heart-golden label:before{background:linear-gradient(200deg,#cac9d1,#cac9d1 42%,#ffe679 55%,#f3cf01)} .mt-ios,.mt-ios-blue,.mt-ios-red{display:inline-block;box-sizing:border-box} .mt-ios-blue label,.mt-ios-red label,.mt-ios label{display:inline-block;position:relative;box-sizing:border-box;cursor:pointer;width:5em;height:3em;border-radius:1.5em;background:#f8f8f8;box-shadow:inset 0 0 0 0 #13bf11,0 0 0 .1875em #ddd;transition:.25s ease-in-out} .mt-ios-blue label:before,.mt-ios-red label:before,.mt-ios label:before{content:"";display:block;position:absolute;width:3em;height:3em;border-radius:1.5em;background:#fff;box-shadow:0 .375em .375em rgba(0,0,0,.2),0 0 0 .1875em #ddd;transition:.25s ease-in-out} .mt-ios-blue input,.mt-ios-red input,.mt-ios input{position:absolute;box-sizing:border-box;height:0;width:0;font-size:inherit;margin:0;border:none;z-index:1;cursor:pointer;-moz-appearance:none;-webkit-appearance:none} .mt-ios-blue input:focus,.mt-ios-red input:focus,.mt-ios input:focus{outline:none} .mt-ios-blue input:checked+label,.mt-ios-red input:checked+label,.mt-ios input:checked+label{box-shadow:inset 0 0 0 1.5em #13bf11,0 0 0 .1875em #13bf11} .mt-ios-blue input:checked+label:before,.mt-ios-red input:checked+label:before,.mt-ios input:checked+label:before{transform:translateX(2em);box-shadow:0 0 0 .1875em transparent,0 .375em .375em rgba(0,0,0,.3)} .mt-ios-blue input:disabled+label,.mt-ios-red input:disabled+label,.mt-ios input:disabled+label{background:#ddd!important;box-shadow:inset 0 0 0 0 #13bf11,0 0 0 .1875em #ccc!important;cursor:not-allowed!important} .mt-ios-blue input:disabled+label:before,.mt-ios-red input:disabled+label:before,.mt-ios input:disabled+label:before{background:#eee!important;box-shadow:none!important} .mt-ios-red label{box-shadow:inset 0 0 0 0 #f35f42,0 0 0 .1875em #ddd} .mt-ios-red input:checked+label{box-shadow:inset 0 0 0 1.5em #f35f42,0 0 0 .1875em #f35f42} .mt-ios-blue label{box-shadow:inset 0 0 0 0 #1fc1c8,0 0 0 .1875em #ddd} .mt-ios-blue input:checked+label{box-shadow:inset 0 0 0 1.5em #1fc1c8,0 0 0 .1875em #1fc1c8} .mt-normal,.mt-normal-garden,.mt-normal-juice,.mt-normal-navi,.mt-normal-violet{display:inline-block;box-sizing:border-box;width:7em;height:3em} .mt-normal-garden label,.mt-normal-juice label,.mt-normal-navi label,.mt-normal-violet label,.mt-normal label{display:inline-block;position:relative;box-sizing:border-box;cursor:pointer;width:100%;height:100%;border-radius:1.5em;background:#f0134d;border:.5px solid hsla(0,0%,45.9%,.31);box-shadow:inset 0 0 .25em 0 rgba(0,0,0,.2),0 -.1875em .25em rgba(0,0,0,.15);transition:all .3s ease;transform-origin:20% center} .mt-normal-garden label:before,.mt-normal-juice label:before,.mt-normal-navi label:before,.mt-normal-violet label:before,.mt-normal label:before{content:"";display:block;position:absolute;top:.25em;left:.25em;width:2.5em;height:2.5em;border:none;border-radius:2em;transition:.3s ease;box-shadow:inset .5px -1px 1px rgba(0,0,0,.35);background:#fff} .mt-normal-garden label:after,.mt-normal-juice label:after,.mt-normal-navi label:after,.mt-normal-violet label:after,.mt-normal label:after{content:"";display:block;position:absolute;top:-.3125em;left:-.25em;width:calc(100% + .5em);height:calc(100% + .5em);background:transparent;border-radius:30px;box-shadow:inset 0 .125em .25em -.125em rgba(0,0,0,.2),0 1px .125em 0 hsla(0,0%,59.2%,.2)} .mt-normal-garden input,.mt-normal-juice input,.mt-normal-navi input,.mt-normal-violet input,.mt-normal input{position:absolute;box-sizing:border-box;height:0;width:0;font-size:inherit;margin:0;border:none;z-index:1;cursor:pointer;-moz-appearance:none;-webkit-appearance:none} .mt-normal-garden input:focus,.mt-normal-juice input:focus,.mt-normal-navi input:focus,.mt-normal-violet input:focus,.mt-normal input:focus{outline:none} .mt-normal-garden input:checked+label,.mt-normal-juice input:checked+label,.mt-normal-navi input:checked+label,.mt-normal-violet input:checked+label,.mt-normal input:checked+label{background:#40bfc1} .mt-normal-garden input:checked+label:before,.mt-normal-juice input:checked+label:before,.mt-normal-navi input:checked+label:before,.mt-normal-violet input:checked+label:before,.mt-normal input:checked+label:before{left:4.2em} .mt-normal-garden input:disabled+label,.mt-normal-juice input:disabled+label,.mt-normal-navi input:disabled+label,.mt-normal-violet input:disabled+label,.mt-normal input:disabled+label{background:#ccc!important;border:none!important;cursor:not-allowed!important} .mt-normal-garden input:disabled+label:before,.mt-normal-juice input:disabled+label:before,.mt-normal-navi input:disabled+label:before,.mt-normal-violet input:disabled+label:before,.mt-normal input:disabled+label:before{background:#ddd!important;box-shadow:none!important} .mt-normal-garden input:disabled+label:after,.mt-normal-juice input:disabled+label:after,.mt-normal-navi input:disabled+label:after,.mt-normal-violet input:disabled+label:after,.mt-normal input:disabled+label:after{box-shadow:none!important} .mt-normal-garden label{background:#ff2e63} .mt-normal-garden input:checked+label{background:#21bf73} .mt-normal-navi label{background:#f5f0e3} .mt-normal-navi input:checked+label{background:#5f6caf} .mt-normal-violet label{background:#f0e3ff} .mt-normal-violet input:checked+label{background:#3e206d} .mt-normal-juice label{background:#f9f6f7} .mt-normal-juice input:checked+label{background:#ff971d} .mt-square,.mt-square-garden,.mt-square-matcha,.mt-square-pink,.mt-square-tomato{display:inline-block;box-sizing:border-box} .mt-square-garden label,.mt-square-matcha label,.mt-square-pink label,.mt-square-tomato label,.mt-square label{display:inline-block;position:relative;box-sizing:border-box;cursor:pointer;width:8em;height:3em;background:#fff;transition:all .3s ease} .mt-square-garden label:before,.mt-square-matcha label:before,.mt-square-pink label:before,.mt-square-tomato label:before,.mt-square label:before{content:"";display:block;position:absolute;width:4em;height:3em;background:#f0134d;transition:.3s ease;z-index:1} .mt-square-garden input,.mt-square-matcha input,.mt-square-pink input,.mt-square-tomato input,.mt-square input{position:absolute;box-sizing:border-box;height:0;width:0;font-size:inherit;margin:0;border:none;z-index:1;cursor:pointer;-moz-appearance:none;-webkit-appearance:none} .mt-square-garden input:focus,.mt-square-matcha input:focus,.mt-square-pink input:focus,.mt-square-tomato input:focus,.mt-square input:focus{outline:none} .mt-square-garden input:after,.mt-square-garden input:before,.mt-square-matcha input:after,.mt-square-matcha input:before,.mt-square-pink input:after,.mt-square-pink input:before,.mt-square-tomato input:after,.mt-square-tomato input:before,.mt-square input:after,.mt-square input:before{content:"";display:block;position:absolute;width:4em;height:3em;z-index:0;display:flex;justify-content:center;align-items:center;color:#888;letter-spacing:1px} .mt-square-garden input:before,.mt-square-matcha input:before,.mt-square-pink input:before,.mt-square-tomato input:before,.mt-square input:before{content:"ON"} .mt-square-garden input:after,.mt-square-matcha input:after,.mt-square-pink input:after,.mt-square-tomato input:after,.mt-square input:after{content:"OFF";left:4em} .mt-square-garden input:checked+label:before,.mt-square-matcha input:checked+label:before,.mt-square-pink input:checked+label:before,.mt-square-tomato input:checked+label:before,.mt-square input:checked+label:before{background:#40bfc1;transform:translateX(4em)} .mt-square-garden input:disabled:after,.mt-square-garden input:disabled:before,.mt-square-matcha input:disabled:after,.mt-square-matcha input:disabled:before,.mt-square-pink input:disabled:after,.mt-square-pink input:disabled:before,.mt-square-tomato input:disabled:after,.mt-square-tomato input:disabled:before,.mt-square input:disabled:after,.mt-square input:disabled:before{cursor:not-allowed!important} .mt-square-garden input:disabled+label,.mt-square-matcha input:disabled+label,.mt-square-pink input:disabled+label,.mt-square-tomato input:disabled+label,.mt-square input:disabled+label{background:#ccc!important;cursor:not-allowed!important} .mt-square-garden input:disabled+label:before,.mt-square-matcha input:disabled+label:before,.mt-square-pink input:disabled+label:before,.mt-square-tomato input:disabled+label:before,.mt-square input:disabled+label:before{background:#ddd!important} .mt-square-garden label:before{background:#ff2e63} .mt-square-garden input:checked+label:before{background:#21bf73} .mt-square-tomato label:before{background:tomato} .mt-square-tomato input:checked+label:before{background:#32cd32} .mt-square-matcha label:before{background:#5b5656} .mt-square-matcha input:checked+label:before{background:#7fcd91} .mt-square-pink label:before{background:#ffe3ed} .mt-square-pink input:checked+label:before{background:#beebe9} .mt-square3d,.mt-square3d-blush,.mt-square3d-garden,.mt-square3d-matcha,.mt-square3d-tomato{display:inline-block;box-sizing:border-box} .mt-square3d-blush label,.mt-square3d-garden label,.mt-square3d-matcha label,.mt-square3d-tomato label,.mt-square3d label{display:inline-block;position:relative;box-sizing:border-box;cursor:pointer;width:7em;height:2em;background:#fff;box-shadow:inset 0 .1em .03em rgba(0,0,0,.2),inset 0 .1em .3em rgba(0,0,0,.3),0 0 2em hsla(0,0%,100%,.6);transition:all .3s ease} .mt-square3d-blush label:before,.mt-square3d-garden label:before,.mt-square3d-matcha label:before,.mt-square3d-tomato label:before,.mt-square3d label:before{content:"";display:block;position:absolute;width:3.6em;height:3.2em;top:-.7em;left:-.1em;background:#f0134d;border-bottom:.07em solid #f7449a;box-shadow:0 .16em .01em #b4085a,0 .12em .3em rgba(180,8,90,.6),0 .12em 2em rgba(0,0,0,.3),.12em .15em .2em rgba(0,0,0,.2);transition:.5s cubic-bezier(.52,-.41,.55,1.46)} .mt-square3d-blush input,.mt-square3d-garden input,.mt-square3d-matcha input,.mt-square3d-tomato input,.mt-square3d input{position:absolute;box-sizing:border-box;height:0;width:0;font-size:inherit;margin:0;border:none;z-index:1;cursor:pointer;-moz-appearance:none;-webkit-appearance:none} .mt-square3d-blush input:focus,.mt-square3d-garden input:focus,.mt-square3d-matcha input:focus,.mt-square3d-tomato input:focus,.mt-square3d input:focus{outline:none} .mt-square3d-blush input:checked+label:before,.mt-square3d-garden input:checked+label:before,.mt-square3d-matcha input:checked+label:before,.mt-square3d-tomato input:checked+label:before,.mt-square3d input:checked+label:before{background:#40bfc1;border-bottom:.07em solid #67cccd;box-shadow:0 .16em .01em #2c8788,0 .12em .3em rgba(44,135,136,.6),0 .12em 2em rgba(0,0,0,.3),-.12em .15em .2em rgba(0,0,0,.2);transform:translateX(3.5em)} .mt-square3d-blush input:disabled+label,.mt-square3d-garden input:disabled+label,.mt-square3d-matcha input:disabled+label,.mt-square3d-tomato input:disabled+label,.mt-square3d input:disabled+label{background:#ccc!important;cursor:not-allowed!important} .mt-square3d-blush input:disabled+label:before,.mt-square3d-garden input:disabled+label:before,.mt-square3d-matcha input:disabled+label:before,.mt-square3d-tomato input:disabled+label:before,.mt-square3d input:disabled+label:before{background:#ccc!important;border-bottom:.07em solid #ccc!important;box-shadow:0 .16em .01em #aaa,0 .12em .3em hsla(0,0%,39.2%,.6),0 .12em 2em rgba(0,0,0,.3),.12em .15em .2em rgba(0,0,0,.2)!important} .mt-square3d-garden label:before{background:#ff2e63;border-bottom:.07em solid #ff6189;box-shadow:0 .16em .01em #e10039,0 .12em .3em rgba(225,0,57,.6),0 .12em 2em rgba(0,0,0,.3),.12em .15em .2em rgba(0,0,0,.2)} .mt-square3d-garden input:checked+label:before{background:#21bf73;border-bottom:.07em solid #37dc8d;box-shadow:0 .16em .01em #167e4c,0 .12em .3em rgba(22,126,76,.6),0 .12em 2em rgba(0,0,0,.3),-.12em .15em .2em rgba(0,0,0,.2)} .mt-square3d-tomato label:before{background:tomato;border-bottom:.07em solid #ff8e7a;box-shadow:0 .16em .01em #fa2600,0 .12em .3em rgba(250,38,0,.6),0 .12em 2em rgba(0,0,0,.3),.12em .15em .2em rgba(0,0,0,.2)} .mt-square3d-tomato input:checked+label:before{background:#32cd32;border-bottom:.07em solid #5bd75b;box-shadow:0 .16em .01em #239023,0 .12em .3em rgba(35,144,35,.6),0 .12em 2em rgba(0,0,0,.3),-.12em .15em .2em rgba(0,0,0,.2)} .mt-square3d-matcha label:before{background:#5b5656;border-bottom:.07em solid #756f6f;box-shadow:0 .16em .01em #343131,0 .12em .3em rgba(52,49,49,.6),0 .12em 2em rgba(0,0,0,.3),.12em .15em .2em rgba(0,0,0,.2)} .mt-square3d-matcha input:checked+label:before{background:#7fcd91;border-bottom:.07em solid #a4dbb1;box-shadow:0 .16em .01em #48b862,0 .12em .3em rgba(72,184,98,.6),0 .12em 2em rgba(0,0,0,.3),-.12em .15em .2em rgba(0,0,0,.2)} .mt-square3d-blush label:before{background:#ff677d;border-bottom:.07em solid #ff9aa9;box-shadow:0 .16em .01em #ff1b3c,0 .12em .3em rgba(255,27,60,.6),0 .12em 2em rgba(0,0,0,.3),.12em .15em .2em rgba(0,0,0,.2)} .mt-square3d-blush input:checked+label:before{background:#9399ff;border-bottom:.07em solid #c6c9ff;box-shadow:0 .16em .01em #4751ff,0 .12em .3em rgba(71,81,255,.6),0 .12em 2em rgba(0,0,0,.3),-.12em .15em .2em rgba(0,0,0,.2)} .mt-transparent,.mt-transparent-blood,.mt-transparent-brown,.mt-transparent-navi,.mt-transparent-violet{display:inline-block;box-sizing:border-box} .mt-transparent-blood label,.mt-transparent-brown label,.mt-transparent-navi label,.mt-transparent-violet label,.mt-transparent label{display:inline-block;position:relative;box-sizing:border-box;cursor:pointer;width:7em;height:3em;border-radius:50px;background:transparent;border:.2em solid #333;transition:all .3s ease} .mt-transparent-blood label:before,.mt-transparent-brown label:before,.mt-transparent-navi label:before,.mt-transparent-violet label:before,.mt-transparent label:before{content:"";display:block;position:absolute;width:2em;height:2em;top:.3em;left:.3em;border-radius:2em;background:#333;transition:.3s ease} .mt-transparent-blood input,.mt-transparent-brown input,.mt-transparent-navi input,.mt-transparent-violet input,.mt-transparent input{position:absolute;box-sizing:border-box;height:0;width:0;font-size:inherit;margin:0;border:none;z-index:1;cursor:pointer;-moz-appearance:none;-webkit-appearance:none} .mt-transparent-blood input:focus,.mt-transparent-brown input:focus,.mt-transparent-navi input:focus,.mt-transparent-violet input:focus,.mt-transparent input:focus{outline:none} .mt-transparent-blood input:checked+label,.mt-transparent-brown input:checked+label,.mt-transparent-navi input:checked+label,.mt-transparent-violet input:checked+label,.mt-transparent input:checked+label{background:rgba(0,0,0,.1)} .mt-transparent-blood input:checked+label:before,.mt-transparent-brown input:checked+label:before,.mt-transparent-navi input:checked+label:before,.mt-transparent-violet input:checked+label:before,.mt-transparent input:checked+label:before{transform:translateX(4em)} .mt-transparent-blood input:disabled+label,.mt-transparent-brown input:disabled+label,.mt-transparent-navi input:disabled+label,.mt-transparent-violet input:disabled+label,.mt-transparent input:disabled+label{background:#ccc!important;border:.2em solid #ccc!important;cursor:not-allowed!important} .mt-transparent-blood input:disabled+label:before,.mt-transparent-brown input:disabled+label:before,.mt-transparent-navi input:disabled+label:before,.mt-transparent-violet input:disabled+label:before,.mt-transparent input:disabled+label:before{background:#ddd!important} .mt-transparent-navi label{border:.2em solid #015668} .mt-transparent-navi label:before{background:#015668} .mt-transparent-navi input:checked+label{background:rgba(1,87,104,.18)} .mt-transparent-blood label{border:.2em solid #801336} .mt-transparent-blood label:before{background:#801336} .mt-transparent-blood input:checked+label{background:rgba(128,19,54,.18)} .mt-transparent-violet label{border:.2em solid #400082} .mt-transparent-violet label:before{background:#400082} .mt-transparent-violet input:checked+label{background:rgba(64,0,130,.18)} .mt-transparent-brown label{border:.2em solid #b7472a} .mt-transparent-brown label:before{background:#b7472a} .mt-transparent-brown input:checked+label{background:rgba(183,71,42,.18)} .mt-icon-cam,.mt-icon-mic,.mt-icon-music,.mt-icon-pin,.mt-icon-ring{display:inline-block;box-sizing:border-box} .mt-icon-cam label,.mt-icon-mic label,.mt-icon-music label,.mt-icon-pin label,.mt-icon-ring label{display:inline-block;position:relative;box-sizing:border-box;cursor:pointer;width:4.5em;height:4.5em;transition:all .3s ease;overflow:hidden;clip-path:polygon(26.43% 80.22%,22.65% 80.45%,19.15% 81.12%,15.99% 82.17%,13.25% 83.58%,10.99% 85.29%,9.29% 87.27%,8.19% 89.47%,7.78% 91.85%,8.05% 94.09%,8.89% 95.91%,10.22% 97.35%,11.93% 98.44%,13.95% 99.21%,16.18% 99.71%,18.52% 99.95%,20.9% 99.99%,23.45% 99.73%,26.27% 99.09%,29.16% 98.09%,31.95% 96.73%,34.45% 95.04%,36.46% 93.03%,37.8% 90.72%,38.29% 88.13%,38.29% 44.64%,68.39% 38.31%,67.6% 73.64%,63.66% 73.9%,60.21% 74.64%,57.26% 75.8%,54.83% 77.31%,52.96% 79.12%,51.68% 81.17%,50.99% 83.41%,50.94% 85.76%,51.48% 87.95%,52.48% 89.76%,53.88% 91.21%,55.61% 92.31%,57.59% 93.09%,59.77% 93.56%,62.05% 93.74%,64.39% 93.66%,66.89% 93.22%,69.6% 92.33%,72.37% 91.02%,75.02% 89.34%,77.38% 87.3%,79.27% 84.95%,80.53% 82.31%,80.99% 79.43%,80.99% 9.85%,25.64% 21.71%);-webkit-clip-path:polygon(26.43% 80.22%,22.65% 80.45%,19.15% 81.12%,15.99% 82.17%,13.25% 83.58%,10.99% 85.29%,9.29% 87.27%,8.19% 89.47%,7.78% 91.85%,8.05% 94.09%,8.89% 95.91%,10.22% 97.35%,11.93% 98.44%,13.95% 99.21%,16.18% 99.71%,18.52% 99.95%,20.9% 99.99%,23.45% 99.73%,26.27% 99.09%,29.16% 98.09%,31.95% 96.73%,34.45% 95.04%,36.46% 93.03%,37.8% 90.72%,38.29% 88.13%,38.29% 44.64%,68.39% 38.31%,67.6% 73.64%,63.66% 73.9%,60.21% 74.64%,57.26% 75.8%,54.83% 77.31%,52.96% 79.12%,51.68% 81.17%,50.99% 83.41%,50.94% 85.76%,51.48% 87.95%,52.48% 89.76%,53.88% 91.21%,55.61% 92.31%,57.59% 93.09%,59.77% 93.56%,62.05% 93.74%,64.39% 93.66%,66.89% 93.22%,69.6% 92.33%,72.37% 91.02%,75.02% 89.34%,77.38% 87.3%,79.27% 84.95%,80.53% 82.31%,80.99% 79.43%,80.99% 9.85%,25.64% 21.71%)} .mt-icon-cam label:before,.mt-icon-mic label:before,.mt-icon-music label:before,.mt-icon-pin label:before,.mt-icon-ring label:before{content:"";display:block;position:absolute;width:4.5em;height:9em;background:linear-gradient(185deg,#cac9d1,#cac9d1 50%,#ff84a5 58%,#ff7cc8);transition:.3s ease} .mt-icon-cam input,.mt-icon-mic input,.mt-icon-music input,.mt-icon-pin input,.mt-icon-ring input{position:absolute;box-sizing:border-box;height:0;width:0;font-size:inherit;margin:0;border:none;z-index:1;cursor:pointer;-moz-appearance:none;-webkit-appearance:none} .mt-icon-cam input:focus,.mt-icon-mic input:focus,.mt-icon-music input:focus,.mt-icon-pin input:focus,.mt-icon-ring input:focus{outline:none} .mt-icon-cam input:after,.mt-icon-cam input:before,.mt-icon-mic input:after,.mt-icon-mic input:before,.mt-icon-music input:after,.mt-icon-music input:before,.mt-icon-pin input:after,.mt-icon-pin input:before,.mt-icon-ring input:after,.mt-icon-ring input:before{content:"";display:block;position:absolute} .mt-icon-cam input:before,.mt-icon-mic input:before,.mt-icon-music input:before,.mt-icon-pin input:before,.mt-icon-ring input:before{background:#cac9d1;border:.25em solid #f5f5f5;width:4.5em;height:.3em;transform:rotate(40deg) translate(.875em,1.825em);transition:.1s ease} .mt-icon-cam input:checked:before,.mt-icon-mic input:checked:before,.mt-icon-music input:checked:before,.mt-icon-pin input:checked:before,.mt-icon-ring input:checked:before{border:.25em solid transparent;background:transparent} .mt-icon-cam input:checked+label:before,.mt-icon-mic input:checked+label:before,.mt-icon-music input:checked+label:before,.mt-icon-pin input:checked+label:before,.mt-icon-ring input:checked+label:before{transform:translateY(-50%)} .mt-icon-cam input:disabled+label,.mt-icon-cam input:disabled:before,.mt-icon-mic input:disabled+label,.mt-icon-mic input:disabled:before,.mt-icon-music input:disabled+label,.mt-icon-music input:disabled:before,.mt-icon-pin input:disabled+label,.mt-icon-pin input:disabled:before,.mt-icon-ring input:disabled+label,.mt-icon-ring input:disabled:before{cursor:not-allowed!important} .mt-icon-ring label{clip-path:polygon(45% 23.44%,42.04% 23.73%,39.5% 24.58%,37.34% 25.93%,35.53% 27.7%,34.05% 29.86%,32.86% 32.32%,31.93% 35.04%,31.22% 37.96%,30.71% 41.02%,30.37% 44.15%,30.16% 47.3%,30.05% 50.4%,30.01% 53.41%,30.01% 56.25%,30.02% 58.87%,30% 61.22%,29.46% 61.49%,29% 61.83%,28.59% 62.21%,28.24% 62.62%,27.95% 63.06%,27.71% 63.51%,27.51% 63.97%,27.36% 64.42%,27.23% 64.86%,27.14% 65.27%,27.08% 65.65%,27.04% 65.98%,27.02% 66.26%,27% 66.47%,27% 66.6%,27% 66.64%,27.01% 67.73%,27.06% 68.72%,27.19% 69.61%,27.42% 70.41%,27.79% 71.12%,28.33% 71.74%,29.07% 72.29%,30.04% 72.75%,31.27% 73.15%,32.81% 73.48%,34.67% 73.75%,36.89% 73.96%,39.5% 74.11%,42.53% 74.22%,46.02% 74.28%,50% 74.3%,50% 74.61%,50% 74.92%,50% 75.23%,50% 75.54%,50% 75.85%,50% 76.16%,50% 76.47%,50% 76.78%,50% 77.09%,50% 77.4%,50% 77.71%,50% 78.02%,50% 78.33%,50% 78.64%,50% 78.95%,50% 79.25%,49.13% 79.25%,48.27% 79.23%,47.43% 79.2%,46.62% 79.15%,45.84% 79.11%,45.1% 79.05%,44.4% 78.99%,43.74% 78.93%,43.15% 78.87%,42.61% 78.82%,42.14% 78.76%,41.75% 78.71%,41.43% 78.67%,41.19% 78.64%,41.05% 78.62%,41% 78.61%,40.99% 78.71%,40.95% 78.99%,40.93% 79.42%,40.92% 79.98%,40.96% 80.65%,41.06% 81.39%,41.24% 82.18%,41.53% 83%,41.94% 83.82%,42.49% 84.61%,43.21% 85.35%,44.11% 86.02%,45.21% 86.58%,46.53% 87.01%,48.1% 87.29%,49.93% 87.39%,51.75% 87.29%,53.32% 87.01%,54.65% 86.58%,55.76% 86.02%,56.67% 85.35%,57.4% 84.61%,57.97% 83.82%,58.39% 83%,58.69% 82.18%,58.89% 81.39%,59.01% 80.65%,59.06% 79.98%,59.06% 79.42%,59.04% 78.99%,59.01% 78.71%,59% 78.61%,58.95% 78.62%,58.81% 78.64%,58.57% 78.67%,58.25% 78.71%,57.86% 78.76%,57.39% 78.82%,56.85% 78.87%,56.26% 78.93%,55.61% 78.99%,54.91% 79.05%,54.16% 79.11%,53.38% 79.15%,52.57% 79.2%,51.73% 79.23%,50.87% 79.25%,50% 79.25%,50% 78.95%,50% 78.64%,50% 78.33%,50% 78.02%,50% 77.71%,50% 77.4%,50% 77.09%,50% 76.78%,50% 76.47%,50% 76.16%,50% 75.85%,50% 75.54%,50% 75.23%,50% 74.92%,50% 74.61%,50% 74.3%,53.96% 74.25%,57.44% 74.1%,60.47% 73.87%,63.07% 73.55%,65.29% 73.17%,67.15% 72.74%,68.69% 72.25%,69.93% 71.72%,70.9% 71.17%,71.65% 70.59%,72.19% 70.01%,72.57% 69.42%,72.8% 68.84%,72.93% 68.28%,72.99% 67.74%,73% 67.24%,73% 67.19%,73% 67.04%,73% 66.8%,72.98% 66.48%,72.95% 66.1%,72.89% 65.67%,72.81% 65.19%,72.7% 64.68%,72.55% 64.16%,72.35% 63.63%,72.11% 63.1%,71.82% 62.59%,71.46% 62.11%,71.05% 61.66%,70.56% 61.27%,70% 60.94%,70.02% 58.61%,70.05% 56%,70.07% 53.18%,70.04% 50.19%,69.93% 47.11%,69.72% 43.98%,69.37% 40.88%,68.85% 37.84%,68.14% 34.95%,67.19% 32.25%,65.99% 29.8%,64.49% 27.67%,62.68% 25.91%,60.51% 24.57%,57.96% 23.73%,55% 23.44%,55% 23.35%,55% 23.12%,55% 22.75%,54.97% 22.28%,54.91% 21.71%,54.82% 21.08%,54.69% 20.41%,54.5% 19.72%,54.25% 19.02%,53.92% 18.35%,53.52% 17.72%,53.03% 17.16%,52.44% 16.69%,51.74% 16.32%,50.93% 16.08%,50% 16%,49.07% 16.08%,48.26% 16.32%,47.56% 16.69%,46.97% 17.16%,46.48% 17.72%,46.08% 18.35%,45.75% 19.02%,45.5% 19.72%,45.31% 20.41%,45.18% 21.08%,45.09% 21.71%,45.03% 22.28%,45% 22.75%,45% 23.12%,45% 23.35%);-webkit-clip-path:polygon(45% 23.44%,42.04% 23.73%,39.5% 24.58%,37.34% 25.93%,35.53% 27.7%,34.05% 29.86%,32.86% 32.32%,31.93% 35.04%,31.22% 37.96%,30.71% 41.02%,30.37% 44.15%,30.16% 47.3%,30.05% 50.4%,30.01% 53.41%,30.01% 56.25%,30.02% 58.87%,30% 61.22%,29.46% 61.49%,29% 61.83%,28.59% 62.21%,28.24% 62.62%,27.95% 63.06%,27.71% 63.51%,27.51% 63.97%,27.36% 64.42%,27.23% 64.86%,27.14% 65.27%,27.08% 65.65%,27.04% 65.98%,27.02% 66.26%,27% 66.47%,27% 66.6%,27% 66.64%,27.01% 67.73%,27.06% 68.72%,27.19% 69.61%,27.42% 70.41%,27.79% 71.12%,28.33% 71.74%,29.07% 72.29%,30.04% 72.75%,31.27% 73.15%,32.81% 73.48%,34.67% 73.75%,36.89% 73.96%,39.5% 74.11%,42.53% 74.22%,46.02% 74.28%,50% 74.3%,50% 74.61%,50% 74.92%,50% 75.23%,50% 75.54%,50% 75.85%,50% 76.16%,50% 76.47%,50% 76.78%,50% 77.09%,50% 77.4%,50% 77.71%,50% 78.02%,50% 78.33%,50% 78.64%,50% 78.95%,50% 79.25%,49.13% 79.25%,48.27% 79.23%,47.43% 79.2%,46.62% 79.15%,45.84% 79.11%,45.1% 79.05%,44.4% 78.99%,43.74% 78.93%,43.15% 78.87%,42.61% 78.82%,42.14% 78.76%,41.75% 78.71%,41.43% 78.67%,41.19% 78.64%,41.05% 78.62%,41% 78.61%,40.99% 78.71%,40.95% 78.99%,40.93% 79.42%,40.92% 79.98%,40.96% 80.65%,41.06% 81.39%,41.24% 82.18%,41.53% 83%,41.94% 83.82%,42.49% 84.61%,43.21% 85.35%,44.11% 86.02%,45.21% 86.58%,46.53% 87.01%,48.1% 87.29%,49.93% 87.39%,51.75% 87.29%,53.32% 87.01%,54.65% 86.58%,55.76% 86.02%,56.67% 85.35%,57.4% 84.61%,57.97% 83.82%,58.39% 83%,58.69% 82.18%,58.89% 81.39%,59.01% 80.65%,59.06% 79.98%,59.06% 79.42%,59.04% 78.99%,59.01% 78.71%,59% 78.61%,58.95% 78.62%,58.81% 78.64%,58.57% 78.67%,58.25% 78.71%,57.86% 78.76%,57.39% 78.82%,56.85% 78.87%,56.26% 78.93%,55.61% 78.99%,54.91% 79.05%,54.16% 79.11%,53.38% 79.15%,52.57% 79.2%,51.73% 79.23%,50.87% 79.25%,50% 79.25%,50% 78.95%,50% 78.64%,50% 78.33%,50% 78.02%,50% 77.71%,50% 77.4%,50% 77.09%,50% 76.78%,50% 76.47%,50% 76.16%,50% 75.85%,50% 75.54%,50% 75.23%,50% 74.92%,50% 74.61%,50% 74.3%,53.96% 74.25%,57.44% 74.1%,60.47% 73.87%,63.07% 73.55%,65.29% 73.17%,67.15% 72.74%,68.69% 72.25%,69.93% 71.72%,70.9% 71.17%,71.65% 70.59%,72.19% 70.01%,72.57% 69.42%,72.8% 68.84%,72.93% 68.28%,72.99% 67.74%,73% 67.24%,73% 67.19%,73% 67.04%,73% 66.8%,72.98% 66.48%,72.95% 66.1%,72.89% 65.67%,72.81% 65.19%,72.7% 64.68%,72.55% 64.16%,72.35% 63.63%,72.11% 63.1%,71.82% 62.59%,71.46% 62.11%,71.05% 61.66%,70.56% 61.27%,70% 60.94%,70.02% 58.61%,70.05% 56%,70.07% 53.18%,70.04% 50.19%,69.93% 47.11%,69.72% 43.98%,69.37% 40.88%,68.85% 37.84%,68.14% 34.95%,67.19% 32.25%,65.99% 29.8%,64.49% 27.67%,62.68% 25.91%,60.51% 24.57%,57.96% 23.73%,55% 23.44%,55% 23.35%,55% 23.12%,55% 22.75%,54.97% 22.28%,54.91% 21.71%,54.82% 21.08%,54.69% 20.41%,54.5% 19.72%,54.25% 19.02%,53.92% 18.35%,53.52% 17.72%,53.03% 17.16%,52.44% 16.69%,51.74% 16.32%,50.93% 16.08%,50% 16%,49.07% 16.08%,48.26% 16.32%,47.56% 16.69%,46.97% 17.16%,46.48% 17.72%,46.08% 18.35%,45.75% 19.02%,45.5% 19.72%,45.31% 20.41%,45.18% 21.08%,45.09% 21.71%,45.03% 22.28%,45% 22.75%,45% 23.12%,45% 23.35%)} .mt-icon-ring label:before{background:linear-gradient(200deg,#cac9d1,#cac9d1 44%,#fe346e 55%,#ffbd69)} .mt-icon-mic label{clip-path:polygon(50% 77.33%,50% 78.16%,50% 79%,50% 79.83%,50% 80.67%,50% 81.5%,50% 82.33%,50% 83.17%,50% 84%,42.51% 83.05%,36.94% 80.5%,33.01% 76.77%,30.43% 72.29%,28.93% 67.5%,28.2% 62.81%,27.98% 58.66%,27.97% 55.48%,27.97% 55.33%,27.93% 54.92%,27.81% 54.35%,27.55% 53.7%,27.1% 53.04%,26.42% 52.47%,25.46% 52.06%,24.15% 51.91%,22.85% 52.06%,21.88% 52.47%,21.2% 53.04%,20.76% 53.7%,20.5% 54.35%,20.38% 54.92%,20.34% 55.33%,20.34% 55.48%,21.02% 66.56%,22.92% 75.16%,25.79% 81.59%,29.38% 86.16%,33.46% 89.18%,37.78% 90.95%,42.1% 91.79%,46.19% 92%,46.16% 93.56%,46.14% 94.98%,46.19% 96.23%,46.38% 97.3%,46.79% 98.16%,47.48% 98.81%,48.52% 99.21%,50% 99.36%,51.49% 99.26%,52.59% 98.92%,53.35% 98.35%,53.83% 97.54%,54.1% 96.5%,54.22% 95.23%,54.24% 93.73%,54.24% 92%,60.56% 91.21%,65.86% 88.97%,70.18% 85.46%,73.6% 80.87%,76.15% 75.39%,77.9% 69.21%,78.91% 62.51%,79.24% 55.48%,79.23% 55.33%,79.19% 54.92%,79.06% 54.35%,78.8% 53.69%,78.35% 53.04%,77.67% 52.47%,76.71% 52.06%,75.42% 51.91%,74.13% 52.06%,73.17% 52.47%,72.49% 53.04%,72.05% 53.69%,71.78% 54.35%,71.65% 54.92%,71.61% 55.33%,71.61% 55.48%,71.65% 56.74%,71.54% 60.05%,70.97% 64.72%,69.62% 70.05%,67.17% 75.33%,63.3% 79.89%,57.68% 83.01%,50% 84%,50% 83.17%,50% 82.33%,50% 81.5%,50% 80.67%,50% 79.83%,50% 79%,50% 78.16%,50% 77.33%,55.71% 76.77%,59.99% 75.11%,63.04% 72.38%,65.08% 68.63%,66.3% 63.88%,66.92% 58.16%,67.13% 51.53%,67.16% 44%,67.12% 36.47%,66.87% 29.82%,66.22% 24.1%,64.95% 19.34%,62.87% 15.57%,59.79% 12.83%,55.49% 11.16%,49.79% 10.59%,44.1% 11.12%,39.86% 12.69%,36.85% 15.31%,34.85% 18.97%,33.66% 23.67%,33.07% 29.41%,32.87% 36.19%,32.84% 44%,32.85% 51.81%,33.06% 58.58%,33.67% 64.31%,34.88% 69%,36.91% 72.64%,39.97% 75.25%,44.26% 76.81%);-webkit-clip-path:polygon(50% 77.33%,50% 78.16%,50% 79%,50% 79.83%,50% 80.67%,50% 81.5%,50% 82.33%,50% 83.17%,50% 84%,42.51% 83.05%,36.94% 80.5%,33.01% 76.77%,30.43% 72.29%,28.93% 67.5%,28.2% 62.81%,27.98% 58.66%,27.97% 55.48%,27.97% 55.33%,27.93% 54.92%,27.81% 54.35%,27.55% 53.7%,27.1% 53.04%,26.42% 52.47%,25.46% 52.06%,24.15% 51.91%,22.85% 52.06%,21.88% 52.47%,21.2% 53.04%,20.76% 53.7%,20.5% 54.35%,20.38% 54.92%,20.34% 55.33%,20.34% 55.48%,21.02% 66.56%,22.92% 75.16%,25.79% 81.59%,29.38% 86.16%,33.46% 89.18%,37.78% 90.95%,42.1% 91.79%,46.19% 92%,46.16% 93.56%,46.14% 94.98%,46.19% 96.23%,46.38% 97.3%,46.79% 98.16%,47.48% 98.81%,48.52% 99.21%,50% 99.36%,51.49% 99.26%,52.59% 98.92%,53.35% 98.35%,53.83% 97.54%,54.1% 96.5%,54.22% 95.23%,54.24% 93.73%,54.24% 92%,60.56% 91.21%,65.86% 88.97%,70.18% 85.46%,73.6% 80.87%,76.15% 75.39%,77.9% 69.21%,78.91% 62.51%,79.24% 55.48%,79.23% 55.33%,79.19% 54.92%,79.06% 54.35%,78.8% 53.69%,78.35% 53.04%,77.67% 52.47%,76.71% 52.06%,75.42% 51.91%,74.13% 52.06%,73.17% 52.47%,72.49% 53.04%,72.05% 53.69%,71.78% 54.35%,71.65% 54.92%,71.61% 55.33%,71.61% 55.48%,71.65% 56.74%,71.54% 60.05%,70.97% 64.72%,69.62% 70.05%,67.17% 75.33%,63.3% 79.89%,57.68% 83.01%,50% 84%,50% 83.17%,50% 82.33%,50% 81.5%,50% 80.67%,50% 79.83%,50% 79%,50% 78.16%,50% 77.33%,55.71% 76.77%,59.99% 75.11%,63.04% 72.38%,65.08% 68.63%,66.3% 63.88%,66.92% 58.16%,67.13% 51.53%,67.16% 44%,67.12% 36.47%,66.87% 29.82%,66.22% 24.1%,64.95% 19.34%,62.87% 15.57%,59.79% 12.83%,55.49% 11.16%,49.79% 10.59%,44.1% 11.12%,39.86% 12.69%,36.85% 15.31%,34.85% 18.97%,33.66% 23.67%,33.07% 29.41%,32.87% 36.19%,32.84% 44%,32.85% 51.81%,33.06% 58.58%,33.67% 64.31%,34.88% 69%,36.91% 72.64%,39.97% 75.25%,44.26% 76.81%)} .mt-icon-mic label:before{background:linear-gradient(200deg,#cac9d1,#cac9d1 50%,#00a8cc 60%,#27496d)} .mt-icon-cam label{clip-path:polygon(89.59% 23.16%,70.43% 35.56%,70.43% 31.86%,70.43% 31.77%,69.92% 28.87%,68.51% 26.28%,66.35% 24.28%,63.66% 23.08%,61.35% 22.78%,15.95% 22.78%,13.43% 23.14%,10.77% 24.41%,8.66% 26.46%,7.31% 29.07%,6.87% 31.86%,6.87% 68.16%,7.16% 70.42%,8.35% 73.11%,10.34% 75.28%,12.91% 76.71%,15.81% 77.23%,15.95% 77.23%,61.35% 77.23%,63.13% 77.06%,65.89% 76.02%,68.16% 74.15%,69.73% 71.66%,70.41% 68.79%,70.43% 68.16%,70.43% 64.47%,89.59% 76.86%,91.92% 76.91%,93.13% 74.97%,93.13% 25.05%,92.91% 24.14%,90.53% 22.8%,89.59% 23.16%,65.89% 68.16%,65.48% 70.05%);-webkit-clip-path:polygon(89.59% 23.16%,70.43% 35.56%,70.43% 31.86%,70.43% 31.77%,69.92% 28.87%,68.51% 26.28%,66.35% 24.28%,63.66% 23.08%,61.35% 22.78%,15.95% 22.78%,13.43% 23.14%,10.77% 24.41%,8.66% 26.46%,7.31% 29.07%,6.87% 31.86%,6.87% 68.16%,7.16% 70.42%,8.35% 73.11%,10.34% 75.28%,12.91% 76.71%,15.81% 77.23%,15.95% 77.23%,61.35% 77.23%,63.13% 77.06%,65.89% 76.02%,68.16% 74.15%,69.73% 71.66%,70.41% 68.79%,70.43% 68.16%,70.43% 64.47%,89.59% 76.86%,91.92% 76.91%,93.13% 74.97%,93.13% 25.05%,92.91% 24.14%,90.53% 22.8%,89.59% 23.16%,65.89% 68.16%,65.48% 70.05%)} .mt-icon-cam label:before{background:linear-gradient(200deg,#cac9d1,#cac9d1 45%,#ffab9c 55%,#c9485b)} .mt-icon-pin label{clip-path:polygon(87.96% 44.68%,55.3% 12.01%,53.39% 10.48%,51.57% 11.9%,51.55% 12.29%,51.56% 27.29%,27.13% 45.38%,12.46% 45.38%,10.38% 46.43%,11% 49.16%,10.9% 49.13%,29.31% 67.52%,13.91% 83.06%,13.57% 83.5%,13.89% 86.15%,13.91% 86.17%,16.53% 86.52%,17% 86.17%,32.49% 70.7%,50.86% 89.13%,50.91% 89.08%,53.67% 89.62%,54.73% 87.64%,54.73% 72.82%,72.73% 48.46%,86.41% 48.43%,88.16% 48.36%,89.45% 46.53%,87.96% 44.68%,17.67% 49.52%,27.2% 49.52%);-webkit-clip-path:polygon(87.96% 44.68%,55.3% 12.01%,53.39% 10.48%,51.57% 11.9%,51.55% 12.29%,51.56% 27.29%,27.13% 45.38%,12.46% 45.38%,10.38% 46.43%,11% 49.16%,10.9% 49.13%,29.31% 67.52%,13.91% 83.06%,13.57% 83.5%,13.89% 86.15%,13.91% 86.17%,16.53% 86.52%,17% 86.17%,32.49% 70.7%,50.86% 89.13%,50.91% 89.08%,53.67% 89.62%,54.73% 87.64%,54.73% 72.82%,72.73% 48.46%,86.41% 48.43%,88.16% 48.36%,89.45% 46.53%,87.96% 44.68%,17.67% 49.52%,27.2% 49.52%)} .mt-icon-pin label:before{background:linear-gradient(200deg,#cac9d1,#cac9d1 47%,#ffe2b0 57%,#ff7315)} .mt-io,.mt-io-garden,.mt-io-navi,.mt-io-violet,.mt-io-yellow{display:inline-block;box-sizing:border-box} .mt-io-garden label,.mt-io-navi label,.mt-io-violet label,.mt-io-yellow label,.mt-io label{display:inline-block;position:relative;box-sizing:border-box;cursor:pointer;width:5.5em;height:2.5em;border-radius:2.5em;background-image:linear-gradient(90deg,#dedede 0,#dedede 50%,#fe6845 0,#fe6845);background-size:11em 2.5em;transition:all .3s ease} .mt-io-garden label:before,.mt-io-navi label:before,.mt-io-violet label:before,.mt-io-yellow label:before,.mt-io label:before{content:"";display:block;position:absolute;width:3em;height:3em;top:-.25em;left:0;border-radius:2em;background:#fff;transition:.3s ease;box-shadow:0 .2em .45em rgba(0,0,0,.3);z-index:1} .mt-io-garden input,.mt-io-navi input,.mt-io-violet input,.mt-io-yellow input,.mt-io input{position:absolute;box-sizing:border-box;height:0;width:0;font-size:inherit;margin:0;border:none;z-index:1;cursor:pointer;-moz-appearance:none;-webkit-appearance:none} .mt-io-garden input:focus,.mt-io-navi input:focus,.mt-io-violet input:focus,.mt-io-yellow input:focus,.mt-io input:focus{outline:none} .mt-io-garden input:after,.mt-io-garden input:before,.mt-io-navi input:after,.mt-io-navi input:before,.mt-io-violet input:after,.mt-io-violet input:before,.mt-io-yellow input:after,.mt-io-yellow input:before,.mt-io input:after,.mt-io input:before{content:"";display:block;position:absolute;z-index:0;border-radius:1em} .mt-io-garden input:before,.mt-io-navi input:before,.mt-io-violet input:before,.mt-io-yellow input:before,.mt-io input:before{width:.4em;height:1.1em;top:.7em;left:1.25em;background:#fff} .mt-io-garden input:after,.mt-io-navi input:after,.mt-io-violet input:after,.mt-io-yellow input:after,.mt-io input:after{width:.5em;height:.5em;top:.9em;left:3.5em;background:transparent;border:.3em solid #999} .mt-io-garden input:checked+label,.mt-io-navi input:checked+label,.mt-io-violet input:checked+label,.mt-io-yellow input:checked+label,.mt-io input:checked+label{background-position:-100%} .mt-io-garden input:checked+label:before,.mt-io-navi input:checked+label:before,.mt-io-violet input:checked+label:before,.mt-io-yellow input:checked+label:before,.mt-io input:checked+label:before{transform:translateX(2.5em)} .mt-io-garden input:disabled:before,.mt-io-navi input:disabled:before,.mt-io-violet input:disabled:before,.mt-io-yellow input:disabled:before,.mt-io input:disabled:before{background:#999} .mt-io-garden input:disabled+label,.mt-io-navi input:disabled+label,.mt-io-violet input:disabled+label,.mt-io-yellow input:disabled+label,.mt-io input:disabled+label{background:#ccc!important;cursor:not-allowed!important} .mt-io-garden input:disabled+label:before,.mt-io-navi input:disabled+label:before,.mt-io-violet input:disabled+label:before,.mt-io-yellow input:disabled+label:before,.mt-io input:disabled+label:before{background:#ccc!important;box-shadow:0 .2em .45em rgba(0,0,0,.5)!important} .mt-io-yellow label{background-image:linear-gradient(90deg,#dedede 0,#dedede 50%,#fddb3a 0,#fddb3a)} .mt-io-garden label{background-image:linear-gradient(90deg,#dedede 0,#dedede 50%,#7fcd91 0,#7fcd91)} .mt-io-navi label{background-image:linear-gradient(90deg,#dedede 0,#dedede 50%,#40bfc1 0,#40bfc1)} .mt-io-violet label{background-image:linear-gradient(90deg,#dedede 0,#dedede 50%,#7e0cf5 0,#7e0cf5)} .mt-yesno,.mt-yesno-blush,.mt-yesno-fruit,.mt-yesno-garden,.mt-yesno-matte{display:inline-block;box-sizing:border-box} .mt-yesno-blush label,.mt-yesno-fruit label,.mt-yesno-garden label,.mt-yesno-matte label,.mt-yesno label{display:inline-block;position:relative;box-sizing:border-box;cursor:pointer;width:9em;height:3.5em;border-radius:50px;background:#f0134d;transition:all .3s ease} .mt-yesno-blush label:after,.mt-yesno-blush label:before,.mt-yesno-fruit label:after,.mt-yesno-fruit label:before,.mt-yesno-garden label:after,.mt-yesno-garden label:before,.mt-yesno-matte label:after,.mt-yesno-matte label:before,.mt-yesno label:after,.mt-yesno label:before{content:"";display:block;position:absolute;font-family:sans-serif;font-size:1.2em;font-weight:700;transition:.3s ease} .mt-yesno-blush label:before,.mt-yesno-fruit label:before,.mt-yesno-garden label:before,.mt-yesno-matte label:before,.mt-yesno label:before{content:"";display:block;position:absolute;content:"Yes";top:.75em;left:.6em;color:rgba(0,0,0,.2)} .mt-yesno-blush label:after,.mt-yesno-fruit label:after,.mt-yesno-garden label:after,.mt-yesno-matte label:after,.mt-yesno label:after{content:"";display:block;position:absolute;content:"No";top:.75em;left:5.3em;color:#fff} .mt-yesno-blush input,.mt-yesno-fruit input,.mt-yesno-garden input,.mt-yesno-matte input,.mt-yesno input{position:absolute;box-sizing:border-box;height:0;width:0;font-size:inherit;margin:0;border:none;z-index:1;cursor:pointer;-moz-appearance:none;-webkit-appearance:none} .mt-yesno-blush input:focus,.mt-yesno-fruit input:focus,.mt-yesno-garden input:focus,.mt-yesno-matte input:focus,.mt-yesno input:focus{outline:none} .mt-yesno-blush input:after,.mt-yesno-blush input:before,.mt-yesno-fruit input:after,.mt-yesno-fruit input:before,.mt-yesno-garden input:after,.mt-yesno-garden input:before,.mt-yesno-matte input:after,.mt-yesno-matte input:before,.mt-yesno input:after,.mt-yesno input:before{content:"";display:block;position:absolute;height:.25em;border-radius:.125em;background:#fff;transition:.3s ease} .mt-yesno-blush input:before,.mt-yesno-fruit input:before,.mt-yesno-garden input:before,.mt-yesno-matte input:before,.mt-yesno input:before{width:1.3875em;transform:rotate(-45deg) translate(1.575em,3.825em)} .mt-yesno-blush input:after,.mt-yesno-fruit input:after,.mt-yesno-garden input:after,.mt-yesno-matte input:after,.mt-yesno input:after{width:1.3875em;transform:rotate(45deg) translate(3.825em,-1.575em)} .mt-yesno-blush input:checked:before,.mt-yesno-fruit input:checked:before,.mt-yesno-garden input:checked:before,.mt-yesno-matte input:checked:before,.mt-yesno input:checked:before{width:1.3625em;transform:rotate(-45deg) translate(1.7375em,4.05em)} .mt-yesno-blush input:checked:after,.mt-yesno-fruit input:checked:after,.mt-yesno-garden input:checked:after,.mt-yesno-matte input:checked:after,.mt-yesno input:checked:after{width:.63em;transform:rotate(45deg) translate(3.95em,-1.4625em)} .mt-yesno-blush input:checked+label,.mt-yesno-fruit input:checked+label,.mt-yesno-garden input:checked+label,.mt-yesno-matte input:checked+label,.mt-yesno input:checked+label{background:#40bfc1} .mt-yesno-blush input:checked+label:before,.mt-yesno-fruit input:checked+label:before,.mt-yesno-garden input:checked+label:before,.mt-yesno-matte input:checked+label:before,.mt-yesno input:checked+label:before{color:#fff} .mt-yesno-blush input:checked+label:after,.mt-yesno-fruit input:checked+label:after,.mt-yesno-garden input:checked+label:after,.mt-yesno-matte input:checked+label:after,.mt-yesno input:checked+label:after{color:rgba(0,0,0,.2)} .mt-yesno-blush input:disabled,.mt-yesno-fruit input:disabled,.mt-yesno-garden input:disabled,.mt-yesno-matte input:disabled,.mt-yesno input:disabled{cursor:not-allowed!important} .mt-yesno-blush input:disabled+label,.mt-yesno-fruit input:disabled+label,.mt-yesno-garden input:disabled+label,.mt-yesno-matte input:disabled+label,.mt-yesno input:disabled+label{background:#ccc!important;cursor:not-allowed!important} .mt-yesno-garden label{background:#ff2e63} .mt-yesno-garden input:checked+label{background:#21bf73} .mt-yesno-matte label{background:#c9485b} .mt-yesno-matte input:checked+label{background:#75b79e} .mt-yesno-fruit label{background:#ff8364} .mt-yesno-fruit input:checked+label{background:#5f6caf} .mt-yesno-blush label{background:#ff677d} .mt-yesno-blush input:checked+label{background:#9399ff} .root{margin:4em auto;width:65%;padding:0 1em;border-radius:1em;background:#f5f5f5;box-shadow:0 20px 68px rgba(0,0,0,.55);font-size:13px} @media screen and (max-width:2300px){.root{width:65%} } @media screen and (max-width:1700px){.root{width:85%} } @media screen and (max-width:800px){.root{width:100%} } .row-wrapper{width:100%;border-bottom:2px solid #ddd} .row-wrapper:last-child{border-bottom:none} .row-wrapper .row{flex:1 1 100%;height:15rem;overflow:hidden} .row-wrapper .row,.row-wrapper .row .col{display:flex;align-items:center;justify-content:space-evenly} .row-wrapper .row .col{flex-direction:column;height:100%} .row-wrapper .row .col .info-class{font-family:Lucida Console,Monaco,monospace;letter-spacing:.5px;text-align:center;line-height:1.5;background:#ddd;padding:5px;border-radius:5px} .row-wrapper .name{font:500 14px Rubik,sans-serif;letter-spacing:.5px;text-transform:uppercase;text-shadow:0 1px 1px rgba(0,0,0,.4);text-align:right;padding:0 10px 10px}